<!--
 * @Descripttion: 条款设置弹框
 * @version: v1.0.0
 * @Author: wang pingqi
 * @Date: 2021-04-29 17:17:15
 * @LastEditors: wang pingqi
 * @LastEditTime: 2022-04-29 14:31:36
-->
<template>
  <KiFormDialog
    :show.sync="row__.show"
    :title="form.status == 'r' ? '查看条款' : '编辑条款'"
    v-model="formData"
    class="form-dialog"
    :readonly="row__.status == 'r'"
    :submit="submit"
    @open="handleOpen"
  >
    <template #el-form v-if="formData">
      <!-- <div>row__.data={{ row__.data }}</div>
      <div>formData={{ formData }}</div> -->

      <h2 v-if="row__.data">{{ row__.data.roomName }}</h2>

      <dl>
        <dt>预订条款</dt>
        <dd>
          <el-form-item label="" prop="latestBookingDays" verify>
            需要提前
            <el-select
              v-model="formData.latestBookingDays"
              placeholder=""
              style="width: 80px"
              clearable
            >
              <el-option
                v-for="item in [0, 1, 3, 7, 15]"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            天预订
          </el-form-item>
        </dd>
      </dl>

      <dl>
        <dt>入住条款</dt>
        <dd>
          需要
          <el-select
            v-model="formData.sheckinType"
            style="width: 80px; margin-right: 4px"
            placeholder=""
            clearable
            @change="onSheckinTypeChange"
          >
            <el-option
              v-for="item in options.liveTypeList"
              :key="item.dataValue"
              :label="item.dataName"
              :value="item.dataValue"
            >
            </el-option>
          </el-select>

          <el-form-item
            prop="serialSheckin"
            label=" "
            :verify="[0, 1].indexOf(formData.sheckinType) > -1? { required: true } :  { required: false }"
            style="display: inline-block"
            ref="serialSheckinNode"
          >
            <el-select
              :disabled="[0, 1].indexOf(formData.sheckinType) == -1"
              v-model="formData.serialSheckin"
              placeholder=""
              style="width: 80px"
              clearable
            >
              <el-option
                v-for="item in [1, 3, 7, 15, 28]"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          天
        </dd>
      </dl>

      <dl>
        <dt>预订间数</dt>
        <dd>
          <el-form-item prop="roomCountMin" :verify="{ type: 'int',  gt: 0 , lte: 999 }">
            至少预订
            <el-input
              v-model.trim="formData.roomCountMin"
              style="width: 100px"
              clearable
            >
            </el-input>
            间
          </el-form-item>
        </dd>
      </dl>

      <dl>
        <dt>取消条款</dt>
        <dd>
          <el-form-item prop="cancelType" verify>
            <el-radio-group
              v-model="formData.cancelType"
              @change="
                (v) => {
                  v == 2 && !formData.cancelHours
                    ? $set(formData, 'cancelHours', 24)
                    : $set(formData, 'cancelHours', null);
                }
              "
            >
              <el-radio :label="0">入住前免费取消</el-radio>
              <el-radio :label="1">一经预订不可更改或取消</el-radio>
              <el-radio :label="2">入住前条件取消</el-radio>
            </el-radio-group>
          </el-form-item>
          <div class="mt10" v-if="formData.cancelType == 2">
            <el-form-item label=" " prop="cancelHours" verify>
              入住前
              <el-select
                v-model.number="formData.cancelHours"
                style="width: 80px"
                placeholder=""
                clearable
              >
                <el-option
                  v-for="item in [24, 48, 72]"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
              小时允许免费取消，过时取消将收取首晚房费
              <form-item-tip>定义入住前的时间基准为最晚入住时间。例如：当设置最晚入住时间为次日06：00，入住前24小时免费取消时，用户在预订的当日06：00前可免费取消。</form-item-tip>
            </el-form-item>
          </div>
        </dd>
      </dl>
    </template>
  </KiFormDialog>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: {
    form: {
      type: Object,
      required: true,
      default() {
        return {
          show: false,
          data: null,
          loading: false,
          status: null,
        };
      },
    }
  },
  computed: {
    ...mapGetters(["dict", "userInfo"]),
  },
  data() {
    return {
      row__: this.form,
      formData: null,
      options: {
        liveTypeList: [
          {
            dataName: "连住",
            dataValue: 0,
          },
          {
            dataName: "限住",
            dataValue: 1,
          },
        ],
      },
    };
  },
  methods: {
    onSheckinTypeChange(nv){
      this.formData.serialSheckin = null;
      this.$refs.serialSheckinNode.clearValidate();
    },
    submit() {
      if (this.form.loading) {
        return false;
      }
      this.$set(this.form, "loading", true);
      const _data = this.form.data;
      const params = {
        ...this.formData,
        hotelId: _data.hotelId,
        roomId: _data.roomId,
      };
      this.$POST("sot-admin-api/hotel/self-room-rule/saveOrUpdate", params)
        .then((res) => {
          this.$emit("change", "add");
        })
        .finally((e) => {
          this.$set(this.form, "loading", false);
        });
    },
    handleOpen() {
      this.$set(this.form, "loading", true);
      this.$POST("sot-admin-api/hotel/self-room-rule/queryForDetail", {
        id: this.form.data.roomId,
      })
        .then(({ data }) => {
          if (this.form.status != "r") {
            !data ? (data = {}) : null;
            !data.latestBookingDays ? (data.latestBookingDays = 0) : null;
            !data.roomCountMin ? (data.roomCountMin = 1) : null;
            !data.cancelType ? (data.cancelType = 0) : null;
            !data.serialSheckin ? (data.serialSheckin = null) : null;
          }
          this.formData = data || {};
        })
        .finally((e) => {
          this.$set(this.form, "loading", false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-dialog {
  h2 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 18px;
  }
  dl {
    margin: 0 0 12px;
    padding: 0;
    border: 1px solid #eee;
    dt {
      margin: 0;
      padding: 12px;
      background-color: #eee;
    }
    dd {
      margin: 0;
      padding: 12px;
      .mt10 {
        margin-top: 10px;
      }
    }
  }
  :deep(.el-select) {
    input {
      height: 36px !important;
    }
  }
}
</style>
